<!--
 * @Author: whr2349 378237242@qq.com
 * @Date: 2025-08-13 15:01:00
 * @LastEditors: whr2349 378237242@qq.com
 * @LastEditTime: 2025-08-15 14:21:11
 * @FilePath: \taluo\src\pages\layout.vue
 * @Description:
 *
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved.
-->
<!-- 布局组件 -->
<template>
  <div class="layout">
    <BaseLayout
      sidebarWidth="200px"
      @onSidebarCollapseChange="onSidebarCollapseHandler"
      :showSidebarCollapseButton="true"
      ref="layoutRef"
    >
      <template #logo>
        <SystemLogo ref="logoRef">
          <template #logoImg>
            <img src="/imgs/pages/logo.png" class="h-5 justify-center" />
          </template>
          <div class="text-dark text-lg">玄学学习宝典</div>
        </SystemLogo>
      </template>
      <template #sidebar>
        <div class="h-full overflow-overlay">
          <el-menu
            class="el-menu-vertical-demo"
            default-active="2"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            router
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon> <img src="/imgs/pages/taluo.png" class="h-4 justify-center" /></el-icon>

                <span class="ml-3">塔罗</span>
              </template>
              <el-menu-item index="1-1">牌意</el-menu-item>
              <el-menu-item index="/taluo/draw">抽牌</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </template>
      <template #head>
        <div class="flex items-center justify-between h-full p-x-4">
          <div><el-input placeholder="搜索"></el-input></div>
          <div class="flex items-center">
            <n-icon
              class="cursor-pointer hover:bg-gray-900/9 rounded"
              size="24"
              color="#333639"
              @click="onClickSysOpions"
            >
              <CodeSandboxOutlined />
            </n-icon>
          </div>
        </div>
      </template>
      <template #main>
        <div class="h-full">
          <router-view></router-view>
        </div>
      </template>
      <template #foot>
        <div
          class="h-full flex justify-center text-center items-center accent-coolGray text-blueGray text-sm"
        >
          备案:京ICP备2020036654号-9 技术:1626303@qq.com
        </div>
      </template>
    </BaseLayout>
  </div>
</template>

<script setup name="Layout">
import { BaseLayout, SystemLogo } from 'vital-material'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

const logoRef = ref(null)
const isCollapse = ref(false)
// 折叠状态
const onSidebarCollapseHandler = (collapse) => {
  // 将折叠状态设置为collapse
  // menuCollapsed.value = collapse
  isCollapse.value = collapse
  // 设置logo标题的显示状态
  logoRef.value?.showTitleChange(!collapse)
}

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .el-menu {
    border-right: none;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
}
</style>
